<html>
  <head>
    <!--CSS file (default YUI Sam Skin) -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">

    <link rel="stylesheet" type="text/css" href="/static/stylesheets/datatable.css">
    <link rel="stylesheet" type="text/css" href="/static/stylesheets/main.css" />

    {{title}}
  </head>
  <body class="yui-skin-sam">
  {{header}}

  <b>Projects:</b><br />
  <div id="project_section" class="grid">
      <table id="projects">
          <thead>
              <tr>
                  <th>Project</th>
                  <th>Type</th>
                  <th>Has Tasks?</th>
              </tr>
          </thead>
          <tbody>
          {% for proj in projects %}
            <tr>
              <td>{{proj.key_description_string}}</td>
              <td>{{proj.project_type}}</td>
              <td>{{proj.has_subtasks}}</td>
            </tr>
          {% endfor %}
          </tbody>
      </table>
  </div>

  <br />
  <b>Create a Project:</b><br />
  <table>
    <tr>
      <td>Description</td>
      <td><input id="description" type="text" name="description" size="50" /></td>
    </tr>
    <tr>
      <td>Project Type</td>
      <td><input id="type" type="text" name="type" /></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" name="submit" value="Add" onclick="addProject()" /></td>
    </tr>
  </table>

  <div id="dialog_container" />

  <br />
  <a name="more" />
  <b>More:</b>
  <ul>
  <li>View <a href="/completedprojects">completed projects</a></li>
  </ul>

  {{footer}}

  <!-- YUI COMMON -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <!-- END YUI COMMON -->

  <!-- YUI MENU -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>

  <!-- Source File -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
  <!-- END YUI MENU -->

  <!-- YUI DATATABLE -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script>

  <!-- Source files -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js"></script>
  <script>
  var projectTable;

  formatDescription = function(elCell, oRecord, oColumn, oData) {
    var pipe = oData.indexOf('|');
    var key = oData.substring(0, pipe);
    var desc = oData.substring(pipe+1);
    elCell.innerHTML = '<a href="/projectdetail?project=' + key + '">' + desc + '</a>';
  };

  YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.EnhanceFromMarkup = new function() {
          var myColumnDefs = [
              {key:"project", label:"Project", sortable:true, formatter:formatDescription},
              {key:"type", label:"Type", sortable:true},
              {key:"has_tasks", label:"Has Tasks?", sortable:true, hidden:false}
          ];

          this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("projects"));
          this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
          this.myDataSource.responseSchema = {
              fields: [
                      {key:"project"},
                      {key:"type"},
                      {key:"has_tasks"}
              ]
          };

          this.myDataTable = new YAHOO.widget.DataTable("project_section", myColumnDefs, this.myDataSource,
                  { sortedBy:{key:"project",dir:"asc"} }
          );
          projectTable = this.myDataTable;

          this.onContextMenuClick = function(p_sType, p_aArgs, p_myDataTable) {
              var task = p_aArgs[1];
              if(task) {
                  // Extract which TR element triggered the context menu
                  var elRow = p_myDataTable.getTrEl(this.contextEventTarget);
                  var oRecord = p_myDataTable.getRecord(elRow);
                  var key = getTaskKey(oRecord.getData("project"));
                  var has_tasks = oRecord.getData("has_tasks");

                  if(elRow) {
                      switch(task.index) {
                          case 0:
                              markProjectComplete(key, has_tasks, elRow.id);
                              break;
                          case 1:
                              deleteProject(key, elRow.id);
                              break;
                      }
                  }
              }
          };
          this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", {trigger:this.myDataTable.getTbodyEl()});
          this.myContextMenu.addItem("Mark completed");
          this.myContextMenu.addItem("Delete (also deletes sub-tasks)");
          this.myContextMenu.render("project_section");
          this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick, this.myDataTable);
      };
  });
  </script>
  <!-- END YUI DATATABLE -->
  
  <!-- YUI SIMPLEDIALOG -->
  <!-- Source files -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
  <script>
  var projectInQuestion;
  var rowIdInQuestion;
  
  YAHOO.namespace("example.container");

  function init() {
    // Define various event handlers for Dialog
    var handleYes = function() {
      server.MarkProjectComplete(projectInQuestion, true, rowIdInQuestion, onMarkProjectCompleteSuccess);
	    this.hide();
    };
    var handleNo = function() {
      server.MarkProjectComplete(projectInQuestion, false, rowIdInQuestion, onMarkProjectCompleteSuccess);
	    this.hide();
    };

    // Instantiate the Dialog
    YAHOO.example.container.simpledialog1 = 
	    new YAHOO.widget.SimpleDialog("simpledialog1", 
			     { width: "450px",
			       fixedcenter: true,
			       visible: false,
			       draggable: true,
			       close: false,
			       text: "Mark the Project's Tasks as completed as well?",
			       icon: YAHOO.widget.SimpleDialog.ICON_HELP,
			       constraintoviewport: true,
			       buttons: [ 
			          { text:"Yes", handler:handleYes, isDefault:true },
						    { text:"No",  handler:handleNo } ]
			     } );
	  YAHOO.example.container.simpledialog1.setHeader("Next Actions");
	
	  // Render the Dialog
	  YAHOO.example.container.simpledialog1.render("dialog_container");
  }
  YAHOO.util.Event.addListener(window, "load", init);
	</script>
  <!-- END YUI SIMPLEDIALOG -->

  <!-- RPC -->
  <script type="text/javascript" src="./static/javascript/json2.js"></script>
  <script type="text/javascript" src="./static/javascript/gtd_rpc.js"></script>
  <script type="text/javascript" src="./static/javascript/gtd_utils.js"></script>
  <script type="text/javascript">
  function deleteProject(key, rowId) {
    server.DeleteProject(key, rowId, onMarkProjectCompleteSuccess);
  }
  
  function markProjectComplete(key, has_tasks, rowId) {
    if (trueString(has_tasks)) {
      projectInQuestion = key;
      rowIdInQuestion = rowId;
      YAHOO.example.container.simpledialog1.text = "complete";
      YAHOO.example.container.simpledialog1.show();
    }
    else {
      server.MarkProjectComplete(key, undefined, rowId, onMarkProjectCompleteSuccess);
    }
  }
  
  function onMarkProjectCompleteSuccess(response) {
    projectTable.deleteRow(response);
  }
  
  function addProject() {
    server.AddProject($('description').value, $('type').value, onAddProjectSuccess);
  }
  
  function onAddProjectSuccess(response) {
    var record = YAHOO.widget.DataTable._cloneObject(response);
    projectTable.addRow(record);
    clearForm();
  }
  
  function clearForm() {
    $('description').value = '';
    $('type').value = '';
  }
  </script>
  </body>
</html>
